Header con sombra

A veces no se trata de "esto veo esto quiero" sino de tomar ideas y aplicarlas a nuestro blog,en definitiva esa es la finalidad cuando compartimos algo.

En este caso no sé a quien agradecer la idea porque la he visto en varias plantillas, por eso el agradecimiento va para BTemplates que es el primer sitio donde vi Archel.

Como se puede apreciar en esa plantilla se ha personalizado el crosscol con una imagen que forma la sombra inferior, la idea es la misma pero aplicada a la cabecera (header)

Para los ejemplos he utilizado la plantilla Minima de Blogger que es la que mejor se presta a ser personalizada, digo esto porque con las nuevas plantillas y las creadas con el diseñador es posible que no encontremos similitud a la hora de buscar algo. Es por eso que siempre digo que si nuestra idea es personalizar la plantilla y más tarde ir aplicando ideas que vamos tomando aquí y allá siempre es mejor utilizar la Minima.

Los estilos para el header o cabecera vienen definidos de esta forma Ver código

#header-wrapper {

width:660px;

margin:0 auto 10px;

border:1px solid $bordercolor;

}

#header-inner {

background-position: center;

margin-left: auto;

margin-right: auto;

}

#header {

margin: 5px;

border: 1px solid $bordercolor;

text-align: center;

color:$pagetitlecolor;

}

#header h1 {

margin:5px 5px 0;

padding:15px 20px .25em;

line-height:1.2em;

text-transform:uppercase;

letter-spacing:.2em;

font: $pagetitlefont;

}

#header a {

color:$pagetitlecolor;

text-decoration:none;

}

#header a:hover {

color:$pagetitlecolor;

}

#header .description {

margin:0 5px 5px;

padding:0 20px 15px;

max-width:700px;

text-transform:uppercase;

letter-spacing:.2em;

line-height: 1.4em;

font: $descriptionfont;

color: $descriptioncolor;

}

#header img {

margin-$startSide: auto;

margin-$endSide: auto;

}

Cada vez utilizamos mayor resolución de pantalla y es por eso que decidimos ensanchar nuestro blog, en el ejemplo el ancho del header de 660px lo modifiqué a 990px lógicamente si nuestro header mide ese ancho en outer-wrapper tendríamos la misma o superior anchura porque es el bloque contenedor de todo el blog.

Al hacer esto también tendremos más espacio para las entradas main-wrapper y la columna sidebar-wrapper esos 330px que hemos aumentado los podemos distribuir entre main-wrapper y sidebar-wrapper queda a nuestro criterio la forma de distribuirlos.

Es muy probable que no tengamos las mismas medidas en nuestra plantilla y nos preguntemos entonces la forma de añadir esa imagen de sombra respetando las medidas que tenemos.

Tenemos la opción de crear una nueva imagen o modificar la que tenemos y adecuar las medidas a nuestro blog, para eso tendremos en cuenta que la imagen con sombra mide 957 x 22 y debe medir de ancho 33px menos de lo que tenemos en header-wrapper. Es decir que si nuestro blog tiene en header-wrapper 800px nuestra imagen debe medir 767px de ancho y 22px de alto.

¿Complicado? no lo es tanto si vamos paso a paso ¿qué tal si antes lo hacemos en ese blog de pruebas?

Descargamos la imagen y la subimos a Blogger o Picasa,la url de la imagen la utilizaremos después para añadirla en nuestra plantilla.

En edición de HTML y sin expandir plantilla buscamos los estilos mencionados anteriormente para el header y sustituimos sólo los que vemos a continuación que son
#header-wrapper - #header-inner - #header img

#header-wrapper {

background:url(url-imagen-sombra-png) no-repeat center bottom;

width:990px;

height:250px;

padding-bottom:27px;

overflow:hidden;

margin-bottom:30px;

}

#header-inner {

border: 1px solid #000000;

background-position: center;

margin-left: auto;

margin-right: auto;

}

#header img {

height: auto;

width: 960px;

}

Si no vemos el título, recordemos que cuando subimos la imagen del banner con el gadget de cabecera debemos escoger la opción "Detrás del título y la descripción" el resultado sería algo así:

Aún queda un último paso y es conseguir que en Explorer se visualice la sombra ubicada correctamente y JMiur me facilitó la solución para corregir esas diferencias, se trata de condicionar las hojas de estilo y añadir antes de </head>

<!--[if IE]>

<style>

#header-wrapper {

background:url(url-imagen-png) no-repeat center bottom;

width:990px;

height:272px;

padding-bottom:0;

overflow:hidden;

margin-bottom:30px;

}

</style>

<![endif]-->

Y ahora si, con eso es suficiente.